<template>
  <div>
    <div class="top">
      <nav class="nav">
        <span class="back" @click="$router.go(-1)">&lt;</span>
      </nav>
      <input type="text" />
    </div>
    <div class="content">
        <ul>
          <li  v-for="item in info" :key="item.houseCode" @click="toDetail('detail',item.houseCode)">
            <div class="left">
              <img src="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png" alt="">
            </div>
            <div class="right">
              <h3>12</h3>
              <h4>{{item.desc}}</h4>
              <p>{{item.tags[0]}}</p>
              <span>{{item.price}}元/月</span>
              </div>
          
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'FindHouse',
  props: {},
  components: {},
   async created(){
    const {data}= await axios({
      url:' http://liufusong.top:8080/houses'
     })
    //  console.log(data.body.list);
     this.info=data.body.list


   },
  data() {
    return {
      info:null,
    }
  },
  methods: {
    toDetail(name,id){

      this.$router.push({
        name,
        query:{
          id:id
        }
     
      },()=>{})
    
    }
  }
}
</script>

<style scoped lang="less">
*{
  margin:  0;
  padding: 0;


}
.top {
  height: 100px;
  background-color: pink;
  display: flex;

  .back {
    font-size: 18px;
    color: #666;

    left: 10px;
    top: 0;
    transform: scale(1, 1.5);
  }
  input {
    height: 25px;
    margin-left: 100px;

  }
}
.content {
    ul{

      li {
        display: flex;
        justify-content: space-around;
        .left {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
}
</style>
